<template>
    <el-dropdown @command="functionSwitch">
        <span class="el-dropdown-link">
            {{ this.$route.path | changeCurrentFunctionLabel }}
            <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="live"
                ><i class="el-icon-camera"></i>实时监控</el-dropdown-item
            >
            <el-dropdown-item command="replay"
                ><i class="el-icon-video-camera"></i>录像回放</el-dropdown-item
            >
            <el-dropdown-item command="data"
                ><i class="el-icon-search"></i>人车识别</el-dropdown-item
            >
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
export default {
    data() {
        return {
            currentFunction: "",
        };
    },
    methods: {
        functionSwitch(command) {
            switch (command) {
                case "live":
                    this.$router.push('/live')
                    break;
                case "replay":
                    this.$router.push('/replay')
                    break;
                case "data":
                    break;
            }
        },
    },
    mounted() {
    },
    filters: {
        changeCurrentFunctionLabel(value) {
            switch (value) {
                case "/live":
                    return "实时监控";
                case "/replay":
                    return "录像回放";
                case "/data":
                    return "人车识别";
            }
        }
    }
};
</script>

<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: #EBEEF5;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: bold;
}
.el-icon-arrow-down {
    font-size: 15px;
}
.el-popper {
    margin-top: -20px;
}
.el-dropdown-menu__item {
    font-size: 16px;
}
.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #C0C4CC !important;
    color: #333333 !important;
}
</style>